<template>
	<!-- 顶部导航部分 -->
	<view class="title_topbox">
		<image class="title_topbox_headimg" src="../../static/头像.png" @click="goToLogin"></image>
		<view class="title_topbox_searchbox">
			<image class="title_topbox_searchbox_searchimg" src="../../static/搜索.png"></image>
			<input type="text" placeholder="AI搜全网卷">
		</view>
		<view class="title_topbox_imgbox" @click="goToMessage">
			<image class="title_topbox_messageimg" src="../../static/日期.png"></image>
		</view>
		<view class="title_topbox_imgbox" @click="goToTool">
			<image class="title_topbox_toolimg" src="../../static/链接.png"></image>
		</view>
	</view>

	<!-- 顶部图片部分 -->
	<view class="title_topimagebox">
		<image class="title_topimagebox_topimg" src="../../static/顶部导航图片.png"></image>
	</view>

	<!-- 中间选项部分 -->
	<view class="optionbox">
		<view v-for="option in options" :key="option.text" class="optionbox_imagetextbox"
			@click="goToPlatform(option.text)">
			<image class="optionbox_imagetextbox_img" :src="option.imgSrc"></image>
			<view class="optionbox_imagetextbox_text">{{ option.text }}</view>
		</view>
	</view>

	<!-- 签到部分 -->
	<view class="checkbox">
		<view class="checkbox_textbox">
			<view class="checkbox_textbox_prizetext">抽取188元现金</view>
			<view class="checkbox_textbox_detailstext" @click="goToSignpage">查看详情</view>
			<image class="checkbox_textbox_backimg" src="../../static/下一步.png" @click="goToSignpage"></image>
		</view>
	</view>

	<!-- 中间第一部分 -->
	<!-- 	<view class="centerbox">
		<view v-for="(item, index) in centerboxItems" :key="index" class="centerbox_textbox"
			:style="{ backgroundImage: 'url(\'' + item.backgroundImage + '\')' }">
			<view class="centerbox_textbox_text1">{{ item.text1 }}</view>
			<view class="centerbox_textbox_text2">{{ item.text2 }}</view>
		</view>
	</view> -->

	<view class="centerbox">
		<view v-for="(item, index) in centerboxItems" :key="index" class="centerbox_textbox"
			@click="goToPlatform(item.text1)" :style="{ backgroundImage: 'url(\'' + item.backgroundImage + '\')' }">
			<view class="centerbox_textbox_text1">{{ item.text1 }}</view>
			<view class="centerbox_textbox_text2">{{ item.text2 }}</view>
		</view>
	</view>

	<!-- 中间第二部分 -->
	<view class="centersecondbox">
		<view class="centersecondbox_leftbox">
			<view class="centersecondbox_leftbox_textimgbox1">
				<image class="centersecondbox_leftbox_textimgbox1_img" src="../../static/现金红包 .png"></image>
				<view class="centersecondbox_leftbox_textimgbox1_text1">新人200现金红包</view>
				<view class="centersecondbox_leftbox_textimgbox1_text2">立即领取</view>
			</view>
			<view class="centersecondbox_leftbox_textimgbox1">
				<image class="centersecondbox_leftbox_textimgbox1_img" src="../../static/千万补贴.png"></image>
				<view class="centersecondbox_leftbox_textimgbox1_text3">官网千万补贴</view>
			</view>
		</view>
		<view class="centersecondbox_rightbox">
			<image class="centersecondbox_rightbox_img" src="../../static/N重惊喜.png"></image>
		</view>
	</view>

	<!-- 中间第三部分 -->


	<view class="centerthirdbox">
		<view class="centerthirdbox_tabbox">
			<view class="centerthirdbox_tabbox_text" v-for="(tab, index) in tabs" :key="index"
				:class="{ 'active': subCurrent === index }" @click="subChecked(index)">
				{{ tab }}
			</view>
		</view>
	</view>

	<!-- 商品部分 -->
	<view class="shop">
		<view class="shopbox" v-if="subCurrent === 0">

			<view class="shopbox_shopcontent" @click="goToProductpage">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>

			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>


			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>


			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>
		</view>

		<view class="shopbox" v-if="subCurrent === 1">
			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>
		</view>

		<view class="shopbox" v-if="subCurrent === 2">
			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<zdy-tabbar :current-page="0"></zdy-tabbar>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['限时秒杀', '京东', '淘宝'],
				subCurrent: 0, // 默认选中第一个子tab
				shops: [], // 用于存储商品数据的数组
				banners: [], // 用于存储Banner数据的数组
				// 定义centerboxItems数组
				centerboxItems: [{
						text1: '新手教程',
						text2: '10s上手',
						backgroundImage: '../../static/新手教程.png'
					},
					{
						text1: '全民分享',
						text2: '分享赚钱',
						backgroundImage: '../../static/全民分享.png'
					},
					{
						text1: '整点秒杀',
						text2: '限时特价',
						backgroundImage: '../../static/整点秒杀.png'
					},
					{
						text1: '意见反馈',
						text2: '建议整改',
						backgroundImage: '../../static/意见反馈.png'
					},
				],
				options: [{
						imgSrc: '../../static/淘宝.png',
						text: '淘宝'
					},
					{
						imgSrc: '../../static/天猫.png',
						text: '天猫'
					},
					{
						imgSrc: '../../static/京东.png',
						text: '京东'
					},
					{
						imgSrc: '../../static/拼多多.png',
						text: '拼多多'
					},
					{
						imgSrc: '../../static/抖音.png',
						text: '抖音'
					},
					{
						imgSrc: '../../static/一元包邮.png',
						text: '一元包邮'
					},
					{
						imgSrc: '../../static/打车加油.png',
						text: '打车加油'
					},
					{
						imgSrc: '../../static/浙里真省.png',
						text: '浙里真省'
					},
					{
						imgSrc: '../../static/折扣话费.png',
						text: '折扣话费'
					},
					{
						imgSrc: '../../static/电影票.png',
						text: '电影票'
					},
				],
			}
		},
		onLoad() {
			this.getShop();
			this.getBanner();
		},
		methods: {
			goToLogin() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/loginpage/loginpage'
				});
			},
			goToMessage() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/MyMessagePage/MyMessagePage'
				});
			},
			goToTool() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/LinkToolPage/LinkToolPage',
				});
			},
			goToSignpage() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/SignPage/SignPage',
					// url:'/pages/FeedbackPage/FeedbackPage'
				});
			},
			goToProductpage() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/ProductPage/ProductPage',
				});
			},
			goToPlatform(platform) {
				const routes = {
					'淘宝': '/pages/taobaopage/taobaopage',
					'天猫': '/pages/tianmaopage/tianmaopage',
					'京东': '/pages/jingdongpage/jingdongpage',
					'拼多多': '/pages/pinduoduo/pinduoduo',
					'抖音': '/pages/douyinpage/douyinpage',
					'打车加油': '/pages/Cartool/Cartool',
					'浙里真省': '/pages/SharingforAllPage/SharingforAllPage',
					'电影票': '/pages/Dramapage/Dramapage',
					
					'整点秒杀': '/pages/FlashSalePage/FlashSalePage',
					'意见反馈': '/pages/FeedbackPage/FeedbackPage',
				};
				if (routes[platform]) {
					uni.navigateTo({
						url: routes[platform]
					});
				} else {
					console.error('No route found for platform:', platform);
				}
			},
			subChecked(index) {
				this.subCurrent = index;
			},
			getBanner() {
				uni.request({
					url: 'https://manage.jwk2022.cn/openapiv2/index/getBanner', // 开发者服务器接口地址
					method: 'POST', // 请求方式
					data: {
						'login_devid': '',
						'admin_userid': '1',
						'appid': '',
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					}, // 设置请求的 header
					success: (res) => {
						// 请求成功的回调
						if (res.data.code === 1) {
							this.banners = res.data.data; // 将获取到的Banner数据赋值给banners数组
							console.log(res.data);
						} else {
							console.error('获取Banner数据失败');
						}
					},
					fail: (err) => {
						// 请求失败的回调
						console.error(err);
					},
					complete: () => {
						// 请求完成的回调（无论成功或失败都会执行）
					}
				});
			},
			getShop() {
				uni.request({
					url: 'https://manage.jwk2022.cn/openapiv2/index/getJdPddBrand',
					method: 'POST',
					data: {
						'cate_id': '1',
						'source_type': 'pdd',
						// 'appid': '',
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data.code === 1) {
							this.shops = res.data.data;
							console.log(this.shops); // 打印获取到的商品数据
						} else {
							console.error('获取Shop数据失败');
						}
					},
					fail: (err) => {
						console.error(err);
					},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}

	/* 顶部导航部分 */
	.title_topbox {
		display: flex;
		padding: 2%;
		/* 	background: #F5DF73; */
		background: rgb(241, 224, 84);
		align-items: center;
	}

	.title_topbox_headimg {
		width: 35px;
		height: 35px;
		margin-right: 15px;
	}

	.title_topbox_searchbox {
		display: flex;
		align-items: center;
		background: white;
		padding: 2%;
		border-radius: 50px;
		width: 45%;
		margin-right: 20px;
		flex: 1;
	}

	.title_topbox_searchbox_searchimg {
		width: 20px;
		height: 17px;
		margin: 0 5px;

	}


	.title_topbox_imgbox {
		background: radial-gradient(circle at center, rgb(241, 224, 84), white);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 35px;
		height: 35px;
		margin: 0 5px;
	}

	.title_topbox_messageimg {
		width: 25px;
		height: 25px;

	}

	.title_topbox_toolimg {
		width: 20px;
		height: 20px;
	}


	/* 顶部图片部分 */
	.title_topimagebox {
		margin-bottom: 5px;
	}

	.title_topimagebox_topimg {
		width: 100%;
		height: 17vh;
	}

	/* 中间选项部分 */
	.optionbox {
		width: 90%;
		margin: 0 auto;
		padding: 2%;
		background: white;
		display: flex;
		flex-wrap: wrap;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.optionbox_imagetextbox {
		width: 20%;
		margin: 1% 0;
	}

	.optionbox_imagetextbox_img {
		width: 35px;
		height: 35px;
		border-radius: 50px;
		display: block;
		margin: 0 auto 4px;
	}

	.optionbox_imagetextbox_text {
		text-align: center;
		font-size: 11px;
	}

	/* 签到部分 */
	.checkbox {
		padding: 2%;
	}

	.checkbox_textbox {
		display: flex;
		align-items: center;
	}

	.checkbox_textbox_prizetext {
		font-size: 15px;
		flex: 1;
		color: #bfa081;
	}

	.checkbox_textbox_detailstext {
		font-size: 10px;
		margin-right: 2px;
		color: #bfa081;
	}

	.checkbox_textbox_backimg {
		display: block;
		width: 15px;
		height: 10px;
	}

	.checkbox {
		width: 90%;
		margin: 0 auto;
		background: url('../../static/中间背景.png') no-repeat center / cover;
		border-radius: 10px;
		height: 50px;
	}


	/* 中间第一部分 */
	.centerbox {
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		gap: 2%;
		padding: 2%;
		margin: 0 auto;
	}

	.centerbox_textbox {
		width: calc(25% - 2%);
		/* 减去间隔的宽度 */
		background-size: cover;
		background-position: center;
		height: 70px;
		border-radius: 10px;
		padding: 2%;
		box-sizing: border-box;
		/* 确保padding不影响宽度 */
	}

	.centerbox_textbox_text1 {
		font-size: 13px;
	}

	.centerbox_textbox_text2 {
		font-size: 10px;
		color: #c7c7c7;
	}

	/* 中间第二部分 */

	.centersecondbox {
		padding: 2%;
		display: flex;
	}

	.centersecondbox_leftbox {
		width: 48%;
	}

	.centersecondbox_leftbox_textimgbox1 {
		width: 100%;
		position: relative;
	}

	.centersecondbox_leftbox_textimgbox1_img {
		width: 100%;
		height: 115px;
		margin-bottom: 5px;
	}

	.centersecondbox_leftbox_textimgbox1_text1 {
		font-size: 12px;
		position: absolute;
		/* top: 277px; */
		/* top: 19px;
		left: 110px; */
		top: 15%;
		left: 55%;
	}

	.centersecondbox_leftbox_textimgbox1_text2 {
		font-size: 12px;
		position: absolute;
		/* top: 70px;
		left: 100px; */
		top: 55%;
		left: 55%;
		color: white;
		background: linear-gradient(to bottom right, rgb(250, 61, 133), rgb(245, 146, 123));
		padding: 2% 6%;
		border-radius: 14px;
	}

	.centersecondbox_leftbox_textimgbox1_text3 {
		font-size: 12px;
		position: absolute;
		/* top: 20px;
		left: 10px; */
		top: 15%;
		left: 10%;
	}

	.centersecondbox_rightbox {
		width: 48%;
		margin-left: 2%;
	}

	.centersecondbox_rightbox_img {
		width: 100%;
	}


	/* 中间第三部分 */
	.centerthirdbox {
		padding: 2%;
	}

	.centerthirdbox_tabbox {
		display: flex;
		align-items: center;
	}

	.centerthirdbox_tabbox_text {
		font-size: 12px;
		color: rgb(120, 120, 120);
		margin: 0 2%;
	}

	/* tab被选样式 */
	.active {
		position: relative;
		color: black;
		font-weight: bold;
	}

	.active::after {
		/* content: "";
		position: absolute;
		width: 23px;
		height: 3px;
		background-color: #E23234;
		left: 0;
		right: 0;
		margin: 0px auto;
		top: 20px;
		border-radius: 5px; */

		/* position: absolute;
		right: -6px;
		bottom: -5px;
		border-radius: 7px;
		content: '';
		width: 12px;
		height: 9px;
		border-right-style: solid;
		border-right-color: #E23234;
		border-bottom-style: solid;
		border-bottom-color: #E23234; */


		/* position: absolute;
		right: -6px;
		bottom: -5px;
		border-radius: 7px;
		content: '';
		width: 9px;
		height: 8px;
		border-right-style: solid;
		border-right-color: #E23234;
		border-bottom-style: solid;
		border-bottom-color: #E23234;
		border-top-left-radius: 13px;
		border-bottom-right-radius: 20px; */
		/* border-top-right-radius: 1px; */

		position: absolute;
		right: -6px;
		bottom: -5px;
		border-radius: 5px;
		content: '';
		width: 9px;
		height: 8px;
		border-right-style: solid;
		border-right-color: #E23234;
		border-bottom-style: solid;
		border-bottom-color: #E23234;
		border-bottom-right-radius: 20px;
	}

	/* 商品部分 */
	.shop {
		/* background: linear-gradient(to bottom, rgba(250, 90, 34, 1) 1%, rgba(250, 90, 34, 0) 17%); */
		padding: 2%;
		/* margin-bottom: 42px; */
		padding-bottom: 25%;
	}

	.shopbox {
		/* margin: 0 auto; */
		display: flex;
		flex-wrap: wrap;
		/* align-items: center; */
		gap: 2%;
	}

	.shopbox_shopcontent {
		width: 43%;
		background: white;
		padding: 3%;
		margin-bottom: 3%;
		border-radius: 10px;
	}

	.shopbox_shopcontent_img {
		width: 100%;
		height: 108px;
	}

	.shopbox_shopcontent_text {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.shopbox_shopcontent_neirongbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shopbox_shopcontent_neirongbox_leftbox {
		padding: 2%;
		width: 40%;
	}

	.shopbox_shopcontent_neirongbox_leftbox_text {
		font-size: 11px;
		text-align: center;
		color: white;
		padding: 5% 10%;
		border-radius: 10px;
		background: linear-gradient(190deg, rgb(247, 97, 76), rgb(248, 195, 79));
	}

	.shopbox_shopcontent_neirongbox_rightbox_text1 {
		color: red;
		font-size: 12px;
		text-align: center;
	}

	.shopbox_shopcontent_neirongbox_rightbox_text2 {
		font-size: 10px;
		color: rgb(187, 187, 187);
		text-align: center;
	}
</style>
